<template>
	<view class="content" v-if="renderType === 'column'">
		<view class="course-grade">
			<text class="grade-text" :class="{'active-tab': index === currentIndex}" v-for="(item, index) in tabText"
				:key="index" @tap="handleSwitchTab(index)">{{item}}</text>
		</view>
		<view class="course-detail">
			<view class="course-items" v-for="(item, index) in renderData" :key="index" @tap="handleSelectCourse()">
				<!-- <image class="course-image" src="../../static/logo.png"></image> -->
				<text class="course-name">{{item.name}}</text>
			</view>
		</view>
	</view>
	<view v-else-if="renderType === 'work'">
		<HomeWork></HomeWork>
	</view>


	<view class="course-detail-column" v-else>
		<view class="course-items" v-for="(item, index) in renderData" :key="index" @tap="handleSelectCourse()">
			<!-- <image class="course-image"
				src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/115b123b408449dd967bb6f2969f0fce_mergeImage.png">
			</image> -->
			<view class="course-info">
				<text class="course-name">{{item.name}}</text>
				<text class="course-time">{{item.time}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import HomeWork from '@/pages/homework/index.vue';
	export default {
		components: {
			HomeWork
		},
		data(props) {
			return {
				tabText: ['全部', '七年级', '八年级', '九年级'],
				database: [{
					index: 1,
					level: '七年级',
					coverImg: '',
					name: '七年级七年级',
					time: '2023.09.02 17:08',
				}, {
					index: 2,
					level: '八年级',
					coverImg: '',
					name: '八年级八年级',
					time: '2023.09.02 17:08',
				}, {
					index: 3,
					level: '九年级',
					coverImg: '',
					name: '九年级九年级',
					time: '2023.09.02 17:08',
				}, {
					index: 3,
					level: '九年级',
					coverImg: '',
					name: '九年级九年级2',
					time: '2023.09.02 17:08',
				}, {
					index: 3,
					level: '九年级',
					coverImg: '',
					name: '九年级九年级21',
					time: '2023.09.02 17:08',
				}, {
					index: 3,
					level: '九年级',
					coverImg: '',
					name: '九年级九年级12',
					time: '2023.09.02 17:08',
				}],
				renderData: [],
				currentIndex: 0,
				renderType: 'column', // column || raw ||work


			}
		},
		onLoad(option) {
			console.log('option.type', option.type)
			uni.setNavigationBarTitle({
				title: option.title,
			});
			this.renderData = this.database;
			this.renderType = option.type === 'video' ? 'raw' : option.type === 'work' ? 'work' : 'column';
		},
		methods: {
			handleSwitchTab(index) {
				this.currentIndex = index;
				if (index === 0) {
					this.renderData = this.database;
				} else {
					this.renderData = this.database.filter(val => val.index === index);
				}
			},
			handleSelectCourse() {
				if (this.renderType === 'raw') {
					uni.navigateTo({
						url: `/pages/detail/index`,
					});
				} else if (this.renderType === 'work') {
					console.log('4444444444')
					// uni.navigateTo({
					// 	url: `/pages/homework/index`,
					// });
				} else {
					uni.navigateTo({
						url: `/pages/catalogue/index`,
					});
				}
			},
		}
	}
</script>

<style scoped>
	.content {
		padding: 0 32rpx;
	}

	.course-grade {
		display: flex;
		align-self: flex-start;
		margin-bottom: 32rpx;
		margin-left: 8rpx;
		margin-top: 2rpx;
	}

	.grade-text {
		height: 44rpx;
		line-height: 44rpx;
		min-width: 56rpx;
		padding: 0 24rpx;
		margin-right: 24rpx;
		color: #A0A0A0;
		font-size: 24rpx;
		border-radius: 28rpx;
		background-color: #FFFFFF;
	}

	.active-tab {
		color: #FFFFFF;
		background-color: #2979FF;
	}

	.course-detail {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 25rpx;
		row-gap: 24rpx;
	}

	.course-items {
		width: 212rpx;
		font-size: 36rpx;
		color: #8f8f94;
	}

	.course-items:nth-child(3n) {
		margin-right: 0;
	}

	.course-image {
		width: 212rpx;
		height: 300rpx;
		border-radius: 5rpx;
		object-fit: contain;
		margin-bottom: 16rpx;
	}

	.course-name {
		color: #222222;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.course-detail-column {
		padding: 48rpx 32rpx 0;
		box-sizing: border-box;
	}

	.course-items {
		width: 100%;
		display: flex;
		margin-bottom: 40rpx;
		padding-bottom: 40rpx;
		position: relative;
	}

	.course-items::after {
		content: '';
		width: 622rpx;
		height: 2rpx;
		background-color: #EEEEEE;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.course-items:last-child::after {
		display: none;
	}

	.course-image {
		width: 300rpx;
		height: 180rpx;
		margin-right: 40rpx;
	}

	.course-info {
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
	}

	.course-name {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #222222;
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
		margin-bottom: 28rpx;
	}

	.course-time {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	/* } */
</style>
